Dynamic Routes

우리는 인덱스 페이지에 블로그 데이터를 채워 넣었지만, 아직 각 개별 포스트 페이지는 만들지 않았다.
포스트 URL이 해당 데이터에 따라 동적으로 생성되도록 하기 위해 동적 라우팅(Dynamic Routes) 기능을 사용해야 한다.

이번 장에서 배울 것

getStaticPaths를 사용해 정적으로 동적 페이지 생성하기
getStaticProps로 페이지별 데이터 패칭하기
remark로 마크다운 렌더링하기
날짜 포맷팅
동적 라우팅 링크 구성
동적 라우팅 팁 모음

동적 라우터 구성 흐름

pages/posts/[id].js 파일을 생성
getStaticPaths()에서 가능한 id 리스트를 반환
getStaticProps({ params })로 해당 id에 맞는 데이터 fetch
dangerouslySetInnerHTML로 마크다운 렌더링
Head, Date, CSS 추가로 포스트 페이지 완성
Index 페이지에 <Link>로 각각의 포스트 연결

핵심 예제 요약

// pages/posts/[id].js
import Layout from '../../components/layout'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

getStaticPaths

export async function getStaticPaths() {
  const paths = getAllPostIds() // [{ params: { id: 'ssg-ssr' } }, ...]
  return { paths, fallback: false }
}

getStaticProps

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return { props: { postData } }
}

마크다운 렌더링

import remark from 'remark'
import html from 'remark-html'

const processedContent = await remark().use(html).process(matterResult.content)
const contentHtml = processedContent.toString()

날짜 포맷

import { parseISO, format } from 'date-fns'

export default function Date({ dateString }) {
  const date = parseISO(dateString)
  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
}

동적 링크 구성

<Link href="/posts/[id]" as={`/posts/${id}`}>
  <a>{title}</a>
</Link>

추가 팁

fallback: false → 사전에 정의되지 않은 경로는 404
fallback: true → 최초 접근 시 fallback 페이지 후 SSG 처리됨
[...id].js → Catch-all routes (e.g., /posts/a/b/c)
404 페이지 직접 생성: pages/404.js
Next.js Router 접근: useRouter()

마무리

이제 동적 라우팅 기반으로 정적 페이지를 동적으로 생성하고
마크다운 렌더링, 날짜 포맷, 페이지 스타일링까지 완성했다.
다음 단계는 API Routes이다!

이번 장에서 배울 것​

동적 라우터 구성 흐름​

핵심 예제 요약​

getStaticPaths​

getStaticProps​

마크다운 렌더링​

날짜 포맷​

동적 링크 구성​

추가 팁​

마무리​